import React from "react";
import { Modal, Input } from "antd";
import { observer, inject } from "mobx-react";
import "./style.scss";

const { TextArea } = Input;

@inject("SubjectStore")
@observer
class Remark extends React.Component {
    state = {
        text: ""
    };

    onChange = e => {
        console.log(e.target.value);
        this.setState({
            text: e.target.value
        });
    };

    sureSubmit = () => {
        const { text } = this.state;
        if (!text) return;
        this.props.SubjectStore.submitText(text);
        this.props.onCancel();
    };

    render() {
        const {
            SubjectStore: { curItem }
        } = this.props;
        return (
            <Modal
                visible
                title="分组备注"
                className="dayu-dialog"
                onOk={this.sureSubmit}
                onCancel={() => this.props.onCancel()}
            >
                <div className="remark-container">
                    <div className="remark-header">
                        <h2 className="header-name">{curItem.name}</h2>
                        <h3 className="name">备注内容</h3>
                    </div>
                    <div className="remark-content">
                        <TextArea
                            placeholder="分组备注信息"
                            // autosize={{ minRows: 2, maxRows: 6 }}
                            style={{ height: "calc(60vh - 125px)" }}
                            onChange={this.onChange}
                        />
                    </div>
                    <div className="remark-footer">
                        <span>提示：</span>
                        分享专题到指定用户后，该用户专题模块可查看操作当前专题内容。
                    </div>
                </div>
            </Modal>
        );
    }
}

export default Remark;
